<template>
	<view>
		<view>

			<view class="video">
				<video id="myVideo" autoplay :src="videoSource" controls>
				</video>
			</view>

			<view class="poem-container">
				<image src="/static/icons/guide_only_bg@3x.png" class="set-bg"></image>
				<!-- 诗词 -->
				<view class="poem">
					<view class="title" v-if="poem.name">
						《{{poem.name}}》
					</view>
					<view class="author" v-if="poem.memo">
						{{poem.memo}}
					</view>
					<view class="poem-content">
						<rich-text :nodes="poem.content"></rich-text>
					</view>
				</view>
				<!-- 按钮 -->
				<view class="btns" v-if="!showPoster">
					<view class="next" @click="nextPoem">下一首</view>
					<view class="jump" @click="toHome">跳过</view>
				</view>

				<view class="func" v-if="!showPoster">
					<view class="share">

						<!-- <text class="txt">我要分享</text> -->
						<button @click="pageShare" hover-class='none' class="btn">
							<image src="/static/icons/guide_share_botton@3x.png" class="func-pic"></image>
							<text class="share-txt">我要分享</text>
						</button>
					</view>
					<view class="poster" @click="posterDesign">
						<image src="/static/icons/guide_poster_botton@3x.png" class="func-pic"></image>
						<text class="txt">生成海报</text>
					</view>
					<view class="qa" @click="toQa">
						<image src="/static/icons/guide_topic_botton@3x.png" class="func-pic"></image>
						<text class="txt">答题赢红包</text>
					</view>
				</view>


			</view>
		</view>
		<!-- 生成海报 -->
		<view class="creat-poster" v-if="showPoster" @click="hidePoster">
			<QSPopup ref="popup">
				<view class="flex_column">
					<view class="backgroundColor-white ">
						<view class="img-box">
						<!-- 小程序码左侧的文字 -->
						<view class="leftsidetxt">
							{{leftSideText}}
						</view>
							<image :src="posterImage || ''" mode="widthFix" class="posterImage"></image>
							<view class="white-title " v-if="select_type=='商务'">
								<view class="title white">
									{{text1}}
								</view>
								<view class="title1 white">
									{{text2}}
								</view>
								<view class="title3 white">
									我是第<text class="num">{{shareNum}}</text>次分享中华传统文化的光荣使者！
								</view>
							</view>

							<view class="white-title " v-else>
								<view class="title">
									{{text1}}
								</view>
								<view class="title1">
									{{text2}}
								</view>
								<view class="title3">
									我是第<text class="num">{{shareNum}}</text>次分享中华传统文化的光荣使者！
								</view>
							</view>
							<view class="title">

							</view>
							<image :src="poem.hbUrl" class="poem-pic" mode=""></image>
							<view class="scan-tip">长按识别二维码</view>
							<image :src="codeUrl" mode="" class="code"></image>
							<view class="txt">
								有文化，不可怕
							</view>
						</view>
					</view>
					<view class="poster-type" v-if="!shareFlag">
						<text class="item default" :class="{'active':select_type==item.name}"
							@click.stop="addClass(item.name)" v-for="(item,index) in typeAry"
							:key="index">{{item.name}}</text>
					</view>
					<view class="share-save" v-if="!shareFlag">
						<button class="item btn" @click.stop="sendToFriends" :class="{'active':select_btn=='send'}">
							发送给好友
						</button>
						<view class="item" @click.stop="saveImg" :class="{'active':select_btn=='save'}">
							保存图片
						</view>
					</view>
				</view>
			</QSPopup>
			<!-- 画布 -->
			<view class="hideCanvasView">
				<canvas class="hideCanvas" id="default_PosterCanvasId" canvas-id="default_PosterCanvasId"
					:style="{width: (poster.width||10) + 'px', height: (poster.height||10) + 'px'}"></canvas>
			</view>


		</view>



	</view>
</template>

<script>
	import {
		shareMixins
	} from '@/mixins/share'
	import _app from '@/js_sdk/QuShe-SharerPoster/QS-SharePoster/app.js';
	// uni_modules引入方式
	import lPainter from '@/uni_modules/lime-painter/components/lime-painter/'
	import {
		getSharePoster
	} from '@/js_sdk/QuShe-SharerPoster/QS-SharePoster/QS-SharePoster.js';
	import {
		mapState,
		mapMutations
	} from 'vuex'


	export default {
		components: {
			lPainter
		},
		mixins: [shareMixins],
		data() {
			return {
				codeUrl: '', // 二维码地址
				img_poster: '',
				base64: '',
				text1: '弘扬优秀文化',
				text2: '坚持文化自信',
				text3: '实现民族复兴',
				text4: '我是第',
				shareNum: 0,
				text5: '次分享中华传统文化的光荣使者！',
				imgUrl: '',
				postType: '默认',
				screenHeight: 0,
				showPoster: false,
				videoSource: '',
				poem: {},
				poster: {},
				posterImage: '',
				canvasId: 'default_PosterCanvasId',
				typeAry: [{
					name: '默认',
					bgImg: ''
				}, {
					name: '古典',
					bgImg: ''
				}, {
					name: '现代',
					bgImg: ''
				}, {
					name: '简约',
					bgImg: ''
				}, {
					name: '商务',
					bgImg: ''
				}, ],
				select_type: '默认', // 选中的海报类型
				select_btn: '',
				sharePage: false,
				shareFlag: false,
				pngUrl: '',
				poemId:'',
				leftSideText:'有文化，不可怕有文化，不可怕有文化，不可怕有文化，不可怕有文化，不可怕有文化，不可怕有文化，不可怕有文化，不可怕有文化，不' // 小程序码左侧的描述文字
			};
		},
		onShow() {
			this.getXcxCode()
		},
		onHide() {

		},
		onLoad(option) {
			
			// 标记当前页面
			uni.setStorageSync('page','guide')

			var that = this
			// 调用获取小程序码的方法
			wx.getSystemInfo({
				success: function(res) {
					console.log(res)
					that.canvasWidth = res.windowWidth - 56
					that.canvasHeight = res.windowHeight - 200
				},
			})
			this.screenHeight = uni.getSystemInfoSync().screenHeight
			this.getPoemAndVideo()
			// 如果有用户扫码了，这里可以接收到scene值
			if (option.scene) {
				const scene = decodeURIComponent(option.scene)
				// 缓存推荐人手机号
				uni.setStorageSync('recPhone', scene)
			}


		},
		//注意必须得设置允许“发送给朋友”onShareAppMessage，是设置onShareTimeline的前提，否则不支持分享到朋友圈
		onShareAppMessage: () => {},
		onShareTimeline: () => {
			return {
				title: "敦中商城",
				query: "",
				imageUrl: ''
			}
		},

		methods: {
			// 获取海报左下侧的文字
			async getLeftSideTxt(){
				const {data:res}=await uni.$http.post('/video/randomPlaybill')
				if(res.success==0){
					console.log(res,99)
					this.leftSideText=res.data.content
				}
			},
			// 获取海报第一行文字
			async getHbTxtLineOne(){
				const {data:res}=await uni.$http.post('/dictionary/getConfig',{
					code:'HB_1H'
				})
				if(res.success==0){
					this.text1=res.data
				}
			},
			// 获取海报第二行文字
			async getHbTxtLineTwo(){
				const {data:res}=await uni.$http.post('/dictionary/getConfig',{
					code:'HB_2H'
				})
				if(res.success==0){
					this.text2=res.data
				}
			},

			// 圆形图片
			circleImg(ctx, img, x, y, r) {
				ctx.save()
				ctx.beginPath();
				ctx.arc(img.height_r / 2, img.height_r / 2, img.height_r / 2, 0, Math.PI * 2, false);
				var d = 2 * r;
				var cx = x + r;
				var cy = y + r;
				ctx.arc(cx, cy, r, 0, 2 * Math.PI);
				ctx.clip();
				ctx.drawImage(img, x, y, d, d);
				ctx.restore()
			},

			//把base64转换成图片
			getBase64ImageUrl: function(data) {
				/// 获取到base64Data
				var base64Data = data;
				/// 通过微信小程序自带方法将base64转为二进制去除特殊符号，再转回base64
				base64Data = wx.arrayBufferToBase64(wx.base64ToArrayBuffer(base64Data));
				/// 拼接请求头，data格式可以为image/png或者image/jpeg等，看需求
				const base64ImgUrl = "data:image/png;base64," + base64Data;
				/// 刷新数据
				return base64ImgUrl;
			},

			image_to_base64(img) {
				var that = this
				return new Promise(((resolve, reject) => {
					wx.downloadFile({
						url: img,
						success(res) {
							console.log(res.tempFilePath, 7)
							uni.setStorageSync('code', res.tempFilePath)
							wx.getFileSystemManager().readFile({
								filePath: res.tempFilePath, //选择图片返回的相对路径
								encoding: 'base64', //编码格式
								success: res => { //成功的回调
									resolve('data:image/png;base64,' + res.data)
									that.codeUrl = 'data:image/png;base64,' + res.data
								}
							})
						}
					})

				}))
			},

			// 获取小程序码
			getXcxCode() {
				var that = this
				that.image_to_base64('https://xcx.weqinqin.cn/qqxcx_interface/api/xcx/getXcxCode?phone=' + uni
					.getStorageSync('phone'))
			},



			hidePoster() {
				this.showPoster = false
				this.postType="默认"
			},
			closeSharePage() {
				this.sharePage = false
			},
			pageShare() {
				if (JSON.stringify(this.userInfo) == '{}') {
					let redirect = '/pages/guide/guide';
					uni.navigateTo({
						url: '/subpkg/login/login'
					})
					uni.setStorageSync('redirect', redirect)
					uni.$showMsg('请先登录!')
				} else {
				  this.select_type="默认"
					this.postType='默认'
					this.shareFc()
					this.showPoster = true
					this.shareFlag = true
					// 调用分享次数增加接口
					this.getShareNum()
				}
			},
			// 点击海报类型
			addClass(type) {
				this.select_type = type
				this.postType = type
				this.select_btn = ''
				this.shareFc()
			},
			// 分享给好友
			sendToFriends() {
				var that = this
				this.select_btn = 'send'
				// this.share()
				uni.previewImage({
					urls: [that.poster.finalPath],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log(data);
						},
						fail: function(err) {
							console.log(err);
						}
					}
				})
			},
			// 保存图片
			saveImg() {
				this.select_btn = 'save'
				this.saveImage()
			},

			// 下一首
			nextPoem() {
				this.getPoemAndVideo()
			},

			// 随机获取古诗和视频
			async getPoemAndVideo() {
				const {
					data: res
				} = await uni.$http.post('/video/getVideo',{
					id:this.poemId
				})
				this.poem = res.data
				this.poemId= res.data._id
				this.shareData = res.data
				this.videoSource = res.data.url
				this.share.title = res.data.name
				_app.getImageInfo(res.data.imgUrl)
				this.imgUrl = res.data.hbUrl


				// 处理网络图片
				uni.getImageInfo({
					src: res.data.hbUrl,
					success(res) {
						console.log(res, 9)
						uni.setStorageSync('path', res.path)
					}
				})

			},
			// 跳过引导页
			toHome() {
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			// 跳转到答题赢红包页面
			toQa() {
				uni.setStorageSync('fromPage','guide')
				if (JSON.stringify(this.userInfo) !== '{}') {
					uni.navigateTo({
						url: '/subpkg/Qa/Qa'
					})
				} else {
					let redirect = '/subpkg/Qa/Qa';
					uni.navigateTo({
						url: '/subpkg/login/login'
					})
					uni.setStorageSync('redirect', redirect)
					uni.$showMsg('请先登录!')
				}
			},
			// 生成海报
			posterDesign() {
				if (JSON.stringify(this.userInfo) == '{}') {
					let redirect = '/pages/guide/guide';
					uni.navigateTo({
						url: '/subpkg/login/login'
					})
					uni.setStorageSync('redirect', redirect)
					uni.$showMsg('请先登录!')
				} else {
					// 调用方法
					
					this.shareFc()
					this.shareFlag = false
					this.showPoster = true
					// 调用分享次数增加接口
					this.getShareNum()
				}

			},
			// 获取分享次数
			async getShareNum() {
				const {
					data: res
				} = await uni.$http.post('/banner/updateFxNum', )
				console.log(res)
				this.shareNum = res.data
			},


			async shareFc() {
				// 调用获取海报第一行,第二行文字的接口
				this.getHbTxtLineOne()
				this.getHbTxtLineTwo()
				this.getLeftSideTxt()
				try {
					_app.log('准备生成:' + new Date())
					const d = await getSharePoster({
						_this: this, //若在组件中使用 必传
						type: this.postType,
						formData: {
							//访问接口获取背景图携带自定义数据
						},
						posterCanvasId: this.canvasId, //canvasId
						delayTimeScale: 20, //延时系数
						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {
							const dx = bgObj.width * 0.3;
							const fontSize = bgObj.width * 0.045;
							const lineHeight = bgObj.height * 0.04;
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
								rs([{
										type: 'custom',
										setDraw(Context) {
											Context.setFillStyle('black');
											Context.setGlobalAlpha(0);
											Context.fillRect(0, bgObj
												.height - bgObj
												.height * 0.2, bgObj
												.width, bgObj
												.height * 0.2);
											Context.setGlobalAlpha(1);
										}
									},
									{
										type: 'image',
										url: '',
										alpha: .3,
										dx,
										dy: bgObj.height - bgObj.width *
											0.25,
										infoCallBack(imageInfo) {
											let scale = bgObj.width * 0.2 /
												imageInfo
												.height;
											return {
												circleSet: {
													x: imageInfo.width *
														scale / 2,
													y: bgObj.width * 0.2 /
														2,
													r: bgObj.width * 0.2 /
														2
												}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
												dWidth: imageInfo.width *
													scale, // 因为设置了圆形图片 所以要乘以2
												dHeight: bgObj.width * 0.2,
												/* roundRectSet: { // 圆角矩形
													r: imageInfo.width * .1
												} */
											}
										}
									},
									{
										type: 'text',
										fontStyle: 'italic',
										// text: '长按识别二维码',
										size: fontSize,
										color: 'white',
										alpha: .5,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											_app.log(
												'index页面的text的infocallback ，textlength:' +
												textLength);
											return {
												dx: bgObj.width -
													textLength - fontSize,
												dy: bgObj.height -
													lineHeight * 3
											}
										},
										serialNum: 0,
										id: 'tag1' //自定义标识
									},
									{
										type: 'text',
										text: '',
										fontWeight: 'bold',
										size: fontSize,
										color: 'white',
										alpha: .75,
										textAlign: 'left',
										textBaseline: 'middle',
										serialNum: 1,
										allInfoCallback({ //v3.0.1 更新 可以获取drawArray中全部数据
											drawArray
										} = {}) {
											const obj = drawArray.find(
												item => item.id ===
												'tag1');
											return new Promise((rs,
												rj) => {
												setTimeout(() => {
													rs({
														dx: obj
															.dx,
														dy: obj
															.dy +
															lineHeight
													});
												}, 1);
											});
										}
									},
								]);
							})
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => { // 为动态设置画布宽高的方法，
							this.poster = bgObj;
						}
					});

					this.posterImage = d.poster.tempFilePath;
					this.$refs.popup.show()
				} catch (e) {

				}

				let ww, hh;
				const query = uni.createSelectorQuery().in(this);
				query.select('#default_PosterCanvasId').boundingClientRect(data => { //获取canvas-dom
					ww = data.width; //准确的宽高
					hh = data.height
					var ctx = uni.createCanvasContext('default_PosterCanvasId') //绑定画布
					switch (this.postType) {
						case '默认':
							ctx.drawImage('/static/bgimgs/default@2x.png', 0, 0, ww,
								hh); //填充进图片
							console.log('测试默认')
							break;
						case '古典':
							ctx.drawImage('/static/bgimgs/classical@2x.png', 0, 0, ww,
								hh); //填充进图片
							break;
						case '现代':
							ctx.drawImage('/static/bgimgs/modern@2x.png', 0, 0, ww,
								hh); //填充进图片
							break;
						case '简约':
							ctx.drawImage('/static/bgimgs/Simplicity@2x.png', 0, 0, ww,
								hh); //填充进图片
							break;
						case '商务':
							ctx.drawImage('/static/bgimgs/merchant@2x.png', 0, 0, ww,
								hh); //填充进图片
							break;
						default:
							ctx.drawImage('/static/bgimgs/default@2x.png', 0, 0, ww,
								hh); //填充进图片
							break;
					}


					// 画小程序码
					var that=this
					let code = uni.getStorageSync('code')
					that.circleImg(ctx,code,465,750,70)
					
					ctx.setFontSize(28);
					ctx.setTextAlign('center') //设置对于坐标点的对齐方式
					if (this.select_type != '商务') {
						ctx.setFillStyle('#333333')
					} else {
						ctx.setFillStyle('#fff')
					}
					// 画公司名称文字
					ctx.fillText(this.text1, 255, 95) //计算距离，将文字定位于图片的某处
					ctx.fillText(this.text2, 255, 150) //计算距离，将文字定位于图片的某处
					ctx.fillText(this.text4, 75, 235)
					ctx.fillText(this.text5, ww / 2 + 80, 235)
					ctx.setFillStyle('#BA460C') //设置内容3的文字样式
					ctx.setFontSize(28);
					ctx.fillText(this.shareNum, 150, 235) //计算距离，将文字定位于图片的某处
					
					ctx.setFontSize(28);

					// 画提示文字
					ctx.setFillStyle('#23B2ED')
					ctx.setFontSize(20);
					ctx.fillText('长按识别二维码', ww / 2 + 214, 740)
					
					// 画 '有文化，不可怕'
					ctx.setFillStyle('#333')
					ctx.setFontSize(20);
					ctx.fillText('有文化，不可怕', ww / 2 + 214, 920)
					
					// 程序码左侧文字
					var chr = this.leftSideText.split("");
					var temp = "";
					var row = [];
					ctx.setFontSize(22)
					ctx.setFillStyle("#666")
					for (var a = 0; a < chr.length; a++) {
						if (ctx.measureText(temp).width < ww-340) {
							temp += chr[a];
						} else {
							a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
							row.push(temp);
							temp = "";
						}
					}
					row.push(temp);
					//如果数组长度大于2 则截取前两个
					if (row.length > 2) {
						var rowCut = row.slice(0, 4);
						var rowPart = rowCut[1];
						var test = "";
						var empty = [];
						for (var a = 0; a < rowPart.length; a++) {
							if (ctx.measureText(test).width < ww-340) {
								test += rowPart[a];
							} else {
								break;
							}
						}
						empty.push(test);
						var group = empty[0] //这里只显示两行，超出的用...表示
						// var group = empty[0] + "..." //这里只显示两行，超出的用...表示
						rowCut.splice(1, 1, group);
						row = rowCut;
					}
					for (var b = 0; b < row.length; b++) {
						ctx.fillText(row[b], 75, 780 + b * 30);
					}
					

					uni.showLoading({ //增加loading等待效果
						mask: true,
						title: '海报生成中...'
					})

					// 画 中心图片
					var that = this
					let path = uni.getStorageSync('path')
					// ctx.drawImage(path);
					ctx.drawImage(path, 30, 285, 584, 328);
					console.log(path, 8)
					// ctx.drawImage(path, 40, 245, 566, 566);
					

					ctx.draw(false, () => {
						setTimeout(() => { //不加延迟的话，base64有时候会赋予undefined
							uni.canvasToTempFilePath({
								canvasId: 'default_PosterCanvasId',
								success: (res) => {
									that.poster.finalPath = res
										.tempFilePath
									console.log(res
										.tempFilePath)
									if (that.shareFlag) {
										uni.previewImage({
											urls: [res
												.tempFilePath
											],
											longPressActions: {
												itemList: ['发送给朋友', '保存图片',
													'收藏'
												],
												success: function(data) {
													console.log(
														'选中了第' + (
															data
															.tapIndex +
															1) +
														'个按钮,第' + (
															data
															.index +
															1) +
														'张图片');
												},
												fail: function(err) {
													console.log(err
														.errMsg);
												}
											}
										})
										// 关闭海报
										that.showPoster = false
									}

								}
							})
							uni.hideLoading();
						}, 2000)
					}); //输出到画布中

				}).exec();
				// console.log('creat', JSON.parse(JSON.stringify(this.poster)).finalPath)
			},

			saveImage() {
				var that = this
				console.log(that.poster.finalPath, 2)
				uni.saveImageToPhotosAlbum({
					filePath: that.poster.finalPath,
					success(res) {
						_app.showToast('保存成功');
						that.showPoster = false
					}
				})
			},
			share() {

				console.log('Share', JSON.parse(JSON.stringify(this.poster)).finalPath)
				// #ifdef APP-PLUS
				_app.getShare(false, false, 2, '', '', '', this.poster.finalPath, false, false);
				// #endif

				// #ifndef APP-PLUS
				// _app.showToast('分享了');
				// #endif
			},
			hideQr() {
				this.$refs.popup.hide()
			}

		},
		computed: {
			...mapState('m_user', ['userInfo'])
		},

	}
</script>

<style lang="scss">
	.white-title {
		color: #fff !important;
		.white{
			color: #fff !important;
		}
	}

	.img-box {
		position: relative;
		.leftsidetxt{
			position: absolute;
			top: 57vh;
			left: 3.5vw;
			width: 50vw;
			height: 19vw;
			overflow: hidden;
			z-index: 9999;
			font-size: 26rpx;
			font-weight: 500;
			color: #666666;
		}

		.code {
			position: absolute;
			top: 57vh;
			left: 61vw;
			border-radius: 50%;
			z-index: 99999;
			width: 20vw;
			height: 20vw;
		}

		.scan-tip {
			position: absolute;
			z-index: 99999;
			font-size: 20rpx;
			font-weight: 500;
			color: #23B2ED;
			top: 54.5vh;
			left: 61vw;
		}
		.txt{
			position: absolute;
			top: 70.5vh;
			left: 61vw;
			color: #333;
			z-index: 99999;
			font-size: 20rpx;
		}

		.poem-pic {
			position: absolute;
			z-index: 99999;
			top: 19vh;
			left: 50%;
			transform: translateX(-50%);
			width: 77.87vw;
			// height: 20vh;
			height: 43.73vw;
		}

		.title1 {
			position: absolute;
			left: 5vw;
			top: 8vh;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			z-index: 99999;
		}

		.title2 {
			position: absolute;
			left: 5vw;
			top: 10vh;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			z-index: 99999;
		}

		.title3 {
			position: absolute;
			left: 5vw;
			top: 13.8vh;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			z-index: 99999;

			.num {
				color: #BA460C;
			}
		}

		.title {
			position: absolute;
			left: 5vw;
			top: 4vh;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			z-index: 99999;


		}

		.posterImage {
			position: absolute;
			z-index: 99;
		}
	}

	.active {
		background: #B91111;
	}


	.share-save {
		display: flex;
		justify-content: space-between;
		padding: 0 53rpx;

		.item {
			width: 298rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid #B91111;
			opacity: 0.77;
			border-radius: 12rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #FFF5F5;
		}

		.btn {
			background-color: transparent;
			margin-top: 0;
		}
	}

	.poster-type {
		margin-top: 4vh;
		margin-bottom: 3vh;
		display: flex;
		padding: 0 7vw;
		justify-content: space-between;
		text-align: center;

		.item {
			width: 114rpx;
			height: 64rpx;
			line-height: 64rpx;
			border: 2rpx solid #B91111;
			border-radius: 12rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFF5F5;
		}

	}

	.btn {
		display: flex;
		flex-direction: column;
	}

	.share-txt {
		margin-top: 25rpx;
	}

	button::after {
		border: none;
	}

	button {
		background-color: #fff;
		font-size: 22rpx;
		font-weight: 400;
		color: #1A1717;
		opacity: 0.9;
		margin-top: 17rpx;
		margin-bottom: 48rpx;
	}

	.video {
		width: 100%;
		height: 422rpx;

		video {
			width: 750rpx;
			height: 422rpx;
		}
	}

	.poem-container {
		position: relative;

		.set-bg {
			position: absolute;
			z-index: -1;
			width: 100%;
			height: 100%;
		}
	}

	.poem {
		// margin-top: 90rpx;
		padding-top: 90rpx;
		text-align: center;

		.title {
			font-size: 38rpx;
			font-weight: 500;
			color: #2C2C2C;
		}

		.author {
			margin-top: 27rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #858585;
			margin-bottom: 40rpx;

		}

		.poem-content {
			font-size: 30rpx;
			font-weight: 500;
			color: #858585;
			padding: 0 35rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			font-weight: 500;
			color: #5C5C5C;
			line-height: 36rpx;
			height: 350rpx;
		}
	}

	.btns {
		display: flex;
		justify-content: space-evenly;
		font-size: 30rpx;
		font-weight: bold;
		line-height: 80rpx;
		text-align: center;

		.next {
			width: 280rpx;
			height: 80rpx;
			background: #D80E0E;
			opacity: 0.77;
			border-radius: 12rpx;
			color: #FFFFFF;
		}

		.jump {
			width: 280rpx;
			height: 80rpx;
			border: 2rpx solid #D80E0E;
			opacity: 0.77;
			border-radius: 12rpx;
			color: #D80E0E;
		}
	}


	.func {
		display: flex;
		justify-content: space-evenly;
		margin-top: 80rpx;

		.share,
		.poster,
		.qa {
			display: flex;
			flex-direction: column;
			text-align: center;

			.txt {
				font-size: 22rpx;
				font-weight: 400;
				color: #1A1717;
				opacity: 0.9;
				margin-top: 24rpx;
				margin-bottom: 60rpx;
			}
		}

		.func-pic {
			width: 74rpx;
			height: 74rpx;
			border: 2rpx solid #000000;
			opacity: 0.6;
			border-radius: 50%;
			margin: auto;
		}
	}

	// 海报
	.creat-poster {
		background-color: rgba(0, 0, 0, .3);
		height: 100%;
		z-index: 999999;
		position: fixed;
		top: 50%;
		left: 0;
		bottom: 0;
		right: 0;
		transform: translateY(-50%);
		background-color: rgba(0, 0, 0, .6);
		padding-bottom: 150rpx;
	}


	.hideCanvasView {
		position: relative;
	}

	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}

	.flex_row_c_c {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.modalView {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		outline: 0;
		transform: scale(1.2);
		perspective: 2500upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all .3s ease-in-out;
		pointer-events: none;
		backface-visibility: hidden;
		z-index: 999;
	}

	.modalView.show {
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
	}

	.flex_column {
		display: flex;
		flex-direction: column;
	}

	.backgroundColor-white {
		background-color: white;
		width: 85vw;
		margin: auto;
		height: 75vh;
		margin-top: 10vh;
		box-sizing: border-box;
	}
	

	.posterImage {
		width: 85vw;
		margin: auto;
		height: 75vh !important;

	}

	.flex_row {
		display: flex;
		flex-direction: row;
	}

	.marginTop2vh {
		margin-top: 8vh;
	}

	// 
	.send_guide {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		z-index: 999;
		background-color: #fff;
	}
</style>
